<template>
  <!-- 背景 -->
  <div class="reset">
    <div class="left1">
      <img class="img1" src="~assets/left.png" />
    </div>
    <div class="right2">
      <img class="img2" src="~assets/right.png" />
    </div>
    <el-main class="bgc-right">
      <!-- 表单 -->
      <span class="txt1">计量鉴定人员取证实操考核系统</span>

      <div class="form1">
        <el-form
          label-width="80px"
          :model="form"
          :rules="resetRules"
          ref="resetForm"
        >
          <span class="txt2">密码重置</span>
          <el-form-item label="身份证:" prop="id">
            <el-input
              type="text"
              prefix-icon="el-icon-user"
              v-model="form.id"
              placeholder="请输入身份证号"
            />
          </el-form-item>

          <el-form-item label="新密码:" prop="password1">
            <el-input
              type="text"
              label="password1"
              prefix-icon="el-icon-message"
              v-model.trim="form.password1"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item label="请确认:" prop="password2">
            <el-input
              type="text"
              label="password2"
              prefix-icon="el-icon-message"
              v-model.trim="form.password2"
              placeholder="请再次输入密码确认"
            />
          </el-form-item>
          <el-row>
            <el-col :offset="6" :span="12">
              <el-button type="success" @click="resetTest('resetForm')" class="submitBtn">
                提交
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-main>
  </div>
</template>

<script>
// import { getLogin } from "api/api.js";
import { resetRules } from "config/rules";

export default {
  name: "reset",
  data() {
    return {
      form: {
        id: "",
        password1: "",
        password2: "",
      },
      resetRules,
      address: "",
      rememberLogin: false,
    };
  },
  methods: {
    resetTest(resetForm) {
      let that = this;
      that.$refs[resetForm].validate((valid) => {
        if (valid) {
          if (that.form.password1 === that.form.password2) {
            that.request();
          } else {
            alert("俩次输入密码不一致");
          }
        } else {
          console.log("null");
          alert("请输入信息!");
        }
      });
    },
    request() {
      let that = this;
      that.axios
        .post("/Login/GetBack", {
          id: that.form.id + "",
          pass: that.form.password1,
        })
        .then((res) => {
          console.log(res);
          if (res.data.state === "success") {
            that.$message({
              showClose: true,
              type: "success",
              message: "重置成功",
            });
            that.$router.replace("/login");
          } else {
            that.$message({
              showClose: true,
              type: "error",
              message: "重置失败",
            });
          }
        })

        .catch((error) => {
          console.log(error);
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.page {
  z-index: 1;
  position: relative;
  width: 1920px;
  height: 1080px;
  background-color: rgba(255, 255, 255, 1);
  overflow: hidden;
}

.reset .left1 .img1 {
  width: 608px;
  height: 100%;
  position: fixed;
  left: 0%;
  padding: 0%;
  z-index: -1;
}
.reset .right2 .img2 {
  width: 492px;
  height: 555px;
  position: fixed;
  right: 0%;
  padding: 0%;
  top: 0%;
}
.reset .el-form-item {
  margin-top: 22px;
  margin-bottom: 22px;
  margin-right: 45px;
}
.reset .submitBtn {
  width: 100%;
  padding: 18px;
  margin: auto;
}
.reset .txt1 {
  z-index: 28;
  width: 476px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(43, 119, 234, 1);
  font-size: 34px;
  font-family: PingFangSC-Semibold;
  white-space: nowrap;
  line-height: 48px;
  text-align: left;
  padding: 200px 600px 20px 700px;
}
.reset .txt2 {
  z-index: 3;
  width: 40px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(34, 36, 40, 1);
  font-size: 20px;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  line-height: 28px;
  text-align: left;
  align-self: center;
  padding: 10px 10px 23px 160px;
}
.reset .form1 {
  width: 476px;

  margin: 80px 300px 800px 750px;
  z-index: 2;
  height: 350px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 28px 16px rgba(19, 53, 104, 0.05);
  align-self: center;
  /* margin-top: 56px; */
  width: 410px;
  /* justify-content: flex-start; */
  padding-top: 38px;
  align-items: center;
  position: relative;
}
</style>